﻿
@{
    ViewBag.Title = "Dropdown";
    Layout = "~/Areas/Demo/Views/Shared/Demo_Layout.cshtml";
}

<div class="row">
    <div class="col-lg-12">
        <h1 class="page-header">Dropdown</h1>
    </div>
</div>

<div class="row">

    <div class="col-sm-6">
        <link href="~/bower_components/bootstrap_dropdowns_enhancement-master/dropdowns-enhancement.min.css" rel="stylesheet" />

        <div class="dropdown">
            <button type="button" class="btn btn-primary" data-toggle="dropdown">
                <lable id="BtnName" class="showbtn"></lable> <span class="caret"></span>
            </button>
            <ul class="dropdown-menu"></ul>
        </div>
        <br />
        <div class="btn-group">
            <button type="button" class="btn btn-primary" onclick="$('.dropdown').dropdowntree.setValue(5)">
                SetValue 1
            </button>
            <button type="button" class="btn btn-primary" onclick="alert($('.dropdown').dropdowntree.getValue())">
                ShowValue
            </button>
            <button type="button" class="btn btn-primary" onclick="alert($('.dropdown').dropdowntree.getText())">
                ShowText
            </button>
        </div>


        <script src="~/bower_components/bootstrap_dropdowns_enhancement-master/dropdowns-enhancement.js"></script>
        <script src="~/Scripts/Common/dropdowntree.js"></script>
        
        <script>
            var ajaxurl = "@Url.Action("DropdownJson")";
            $(function () {
                var tree = [{
                    text: "Parent 1", nodes: [{
                        text: "Child 1", nodes: [{
                            text: "Grandchild 1"
                        },
                        {
                            text: "Grandchild 2"
                        }]
                    }, { text: "Child 2" }]
                },
                    {
                        text: "Parent 2", nodes: [{
                            text: "Child 3", nodes: [{
                                text: "Grandchild 3"
                            },
                            {
                                text: "Grandchild 4"
                            }]
                        }, {
                            text: "Child 4", nodes: [{
                                text: "Grandchild 5"
                            },
                                {
                                    text: "Grandchild 6"
                                }]
                        }]
                    }, { text: "Parent \"'3" }, { text: "Parent 4" }, { value: "\"'15", text: "Parent 5" }];
                var list = [{ id: 1, text: "Parent 1", parent: 0 },
                { id: 2, text: "Child 1", parent: 1 },
                { id: 3, text: "Grandchild 1", parent: 2 },
                { id: 4, text: "Grandchild 2", parent: 2 },
                { id: 5, text: "Child 2", parent: 1 },
                { id: 6, text: "Parent 2", parent: 0 },
                { id: 7, text: "Child 3", parent: 6 },
                { id: 8, text: "Grandchild 3", parent: 7 },
                { id: 9, text: "Grandchild 4", parent: 7 },
                { id: 10, text: "Child 4", parent: 6 },
                { id: 11, text: "Grandchild 5", parent: 10 },
                { id: 12, text: "Grandchild 6", parent: 10 },
                { id: 13, text: "Parent 3", parent: 0 },
                { id: 14, text: "Parent 4", parent: 0 },
                { id: 14, text: "Parent 5", parent: 0 }];
                var d = $.arraytotree(list, {
                    id: "id",
                    text: "text",
                    parentId: "parent",
                    creatNode: function (i, item) {
                        item.text = item.text + "|" + i + ";";
                    }
                });
                $(".dropdown").dropdowntree({
                    defaultval: "2",
                    //data: tree,
                    data : d,
                    value: "value",
                    text: "text",
                    showall: true,
                    allvalue: "",
                    alltext: "全部",
                    sons: "nodes",
                    onlyselleaf: true
                });
            });
        </script>
    </div>
</div>